<template>
  <view class="main-page detail-page">
    <view class="height20"></view>
    <view class="detail">
      <view class="detail-title">信息修改</view>
      <view class="form-item align-start">
        <view class="form-title">头像：</view>
        <view class="form-content">
          <view class="user-img-box" @click="uploadFn">
            <image v-if="form.avatar" :src="form.avatar" mode="scaleToFill" />
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="form-title">姓名：</view>
        <view class="form-content">
          <uni-easyinput v-model="form.personName" trim="all" placeholder="请输入姓名"
            primaryColor="#4E6EF2"></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-title">电话：</view>
        <view class="form-content">
          <uni-easyinput v-model="form.personPhone" trim="all" placeholder="请输入电话"
            primaryColor="#4E6EF2"></uni-easyinput>
        </view>
      </view>
      <view class="form-item align-start">
        <view class="form-title">地址：</view>
        <view class="form-content">
          <uni-easyinput v-model="form.local" type="textarea" autoHeight placeholder="请输入地址"
            primaryColor="#4E6EF2"></uni-easyinput>
        </view>
      </view>
      <view class="height20"></view>
      <view class="form-item align-center flex-center">
        <view class="main-btn" @click="submit">提交</view>
        <view class="main-btn-plain" style="margin-left: 80rpx" @click="goBack">返回</view>
      </view>
      <view class="height40"></view>
    </view>
    <view class="height20"></view>
  </view>
</template>

<script>
import { baseUrl, getOpenId } from "@/static/js/utils.js";
import { userBind } from "@/api/user";
export default {
  name: "claimDetail",
  components: {},
  props: {},
  data() {
    return {
      baseUrl,
      openid: "",
      userid: "",
      form: {
        avatar: "",
        personName: "",
        personPhone: "",
        local: "",
      },
    };
  },
  computed: {},
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getUserInfo(userInfo) {
      this.form.avatar = userInfo.avatar || "";
      this.form.personName = userInfo.personName || "";
      this.form.personPhone = userInfo.personPhone || "";
      this.form.local = userInfo.local || "";
      this.userid = userInfo.id;
    },
    submit() {
      if (
        Object.keys(this.form).filter((k) => k !== "local" && !this.form[k])
          .length > 0
      ) {
        uni.showToast({
          icon: "none",
          title: "请完善表单内容",
        });
        return;
      }
      uni.showLoading({
        title: "提交中，请稍等",
      });
      setTimeout(() => {
        uni.hideLoading();
        this.submitFlag = true;
        uni.showToast({
          icon: "none",
          title: "提交成功",
        });
      }, 1000);
      // userBind({
      //   data: { ...this.form, openid: this.openid, id: this.userid },
      //   callback: () => {
      //     uni.hideLoading();
      //     this.submitFlag = true;
      //     uni.showToast({
      //       icon: 'none',
      //       title: '提交成功',
      //     });
      //     this.setUserReg();
      //   },
      // });
    },
    uploadFn() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"],
        success: (res) => {
          uni.showLoading({
            title: "上传中",
          });
          uni.uploadFile({
            url: baseUrl + "wechat/treemsg/avatar",
            filePath: res.tempFilePaths[0],
            name: "avatarfile",
            success: (res) => {
              console.log(res);
              uni.hideLoading();
              if (res.data) {
                const data = JSON.parse(res.data);
                if (data && data.imgUrl) {
                  this.form.avatar = data.imgUrl;
                } else {
                  uni.showToast({
                    icon: "none",
                    title: "图片上传失败",
                  });
                }
              }
            },
            fail: () => {
              uni.showToast({
                icon: "none",
                title: "图片上传失败",
              });
            },
          });
        },
        fail: (err) => { },
      });
    },
  },
  watch: {},
  onLoad() {
    this.setUserReg(this.getUserInfo);
    this.openid = getOpenId();
  },
  onReady() { },
};
</script>

<style lang="scss" scoped>
@import './style/userInfo.scss';
</style>
